import Vue from 'vue'
import VueRouter from 'vue-router'
import { getToken } from '@/utils/storage'

// 添加懒加载 不会一上来就将所有的组件都加载，而是访问到对应的路由了，才加载解析这个路由对应的所有组件
const Layout = () => import('@/views/Layout')// 首页
const Article = () => import('@/views/Article')// 面经
const Collect = () => import('@/views/Collect')// 收藏
const Like = () => import('@/views/Like')// 喜欢
const User = () => import('@/views/User')// 我的
const ArticleDetail = () => import('@/views/ArticleDetail')
const Login = () => import('@/views/Login')
const Register = () => import('@/views/Register')
Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Layout,
      // 重定向，首页默认跳到面经页面
      redirect: '/article',
      // 路由嵌套
      children: [
        // 二级路由页面 1面经
        { path: '/article', component: Article },
        // 二级路由页面 2收藏
        { path: '/collect', component: Collect },
        // 二级路由页面 3喜欢
        { path: '/like', component: Like },
        // 二级路由页面 4我的
        { path: '/user', component: User }
      ]
    },
    { path: '/detail/:id', component: ArticleDetail },
    { path: '/login', component: Login },
    { path: '/register', component: Register }
  ]
})
// 声明数组 存放可以放行的页面路径 白名单页面
const whiteList = ['/login', '/register']
// 全局前置导航守卫 -> 拦截器
router.beforeEach((to, from, next) => {
  // to 到哪里去 path"/article"
  // from 从哪里来
  // next 开关 打开 放行
  // console.log(from)
  // next()
  if (getToken() || whiteList.includes(to.path)) {
    next()
  } else {
    next('/login')
  }
})

export default router
